<template>
  <div class="financial-container">
    <v-layout wrap justify-center align-center>

      <!-- table -->
      <v-flex md12 class="elevation-1">
        <v-data-table :headers="headers" :loading="loading" :items="tableData" hide-actions>
          <template v-slot:items="props">
            <td class="text-xs-center">{{ props.item.incomeId }}</td>
            <td class="text-xs-center">{{ props.item.nickName }}</td>
            <td class="text-xs-center">{{ props.item.uid }}</td>
            <td class="text-xs-center">{{ props.item.incomeType | IncomeType }}</td>
            <td class="text-xs-center">{{ props.item.project }}</td>
            <td class="text-xs-center">{{ props.item.change }}</td>
            <td class="text-xs-center">{{ props.item.balance }}</td>
            <td class="text-xs-center">{{ getTime(props.item.createTime) }}</td>
            <td class="text-xs-center">{{ props.item.desc }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>
            <td class="text-xs-center">{{ props.item.remark }}</td>

          </template>
          <template v-slot:no-data>
            <v-alert :value="true" outline color="warning" icon="info">暂无数据</v-alert>
          </template>
        </v-data-table>

        <v-layout class="pagination-wrapper">
          <v-flex md10 d-flex justify-start align-center>
            <v-flex d-flex md2 justify-start align-center>
              <v-flex md4 class="title-color">显示</v-flex>
              <v-flex md4>
                <v-select @change="onPageOptionChange" :items="pageOptions" v-model="pagination.limit"></v-select>
              </v-flex>
              <v-flex md4 class="title-color">条/页</v-flex>
            </v-flex>
            <v-flex md2 class="title-color">共 {{ pagination.pageCount }} 条数据</v-flex>
            <v-flex md2></v-flex>
            <v-flex md4>
              <v-pagination
                @input="onPageChange"
                :length="pagination.pageCount"
                circle
                total-visible="5"
                v-model="pagination.page"
              />
            </v-flex>
            <v-flex md2></v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>

   
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Bill } from "@/api";
import { TaskStatusKV, PageOptions, ProjectTypeKV } from "@/utils/constants";
import { KV, Pagination } from  "@/utils/type";
import { forEach } from "lodash";
import { getTime } from '@/utils/commonUtils';
import { ReqProfitIncome } from '@/api/bean';
declare const $Vue: Vue;

@Component
export default class OrderList extends Vue {
  private projectTypes: Array<KV> = ProjectTypeKV;
  private pageOptions: any = [];

  private queryForm: any = {
    projectType: "",
    nickName: "",
    status: 0
  };

  private headers: Array<any> = [
    { text: "登录账号", align: "center", sortable: false, value: "id" },
    { text: "昵称", align: "center", sortable: false, value: "taskId" },
    { text: "最后登录时间", align: "center", sortable: false, value: "platform" },
    { text: "首次下单时间", align: "center", sortable: false, value: "type" },
    { text: "最后下单时间", align: "center", sortable: false, value: "seller" },
    { text: "接单总数", align: "center", sortable: false, value: "myshop" },
    { text: "返回产品本金统计", align: "center", sortable: false, },
    { text: "返现佣金统计", align: "center", sortable: false, value: "createTime" },
    { text: "推广会员统计", align: "center", sortable: false, value: "updateTime" },
    { text: "推广佣金统计", align: "center", sortable: false, value: "action" },
    { text: "推广代理订单总数", align: "center", sortable: false, value: "action" },
    { text: "直接代理订单数", align: "center", sortable: false, value: "action" },
    { text: "间接代理订单数", align: "center", sortable: false, value: "action" },
    { text: "会员提现笔数", align: "center", sortable: false, value: "action" },
    { text: "申请提现金额", align: "center", sortable: false, value: "action" },
    { text: "提现美金", align: "center", sortable: false, value: "action" },
    { text: "提现人民币", align: "center", sortable: false, value: "action" },
  ];

  private tableData: any = [
    {
      username: "合适的"
    }
  ];

  private loading: boolean = false;

  private isQuery: boolean = false;

  private pagination: Pagination = {
    pageCount: 20,
    page: 1,
    limit: 10,
    offset: 0,
  };

  protected mounted() {
    // this.getFinancialDetailList();
    this.initialize();
    
  }

  private getTime(date: string) {
    return getTime(date);
  }


  private initialize() {
    // this.topupStatus = TopupStatusKV.slice();
    this.pageOptions = PageOptions.slice();
  }

  private onQuery(from?: string) {
    let params: any = {};

    let valid = 0;
    forEach(this.queryForm, (item, key) => {
      item ? (params[key] = item) : valid++;
    });
    if (valid === 3) {
      return $Vue.$emit("snackbar", {
        message: "请至少填写一个查询条件"
      });
    }

    if (from === undefined) {
      this.pagination.offset = 0;
      this.pagination.page = 1;
    }

    params.limit = this.pagination.limit;
    params.offset = this.pagination.offset;
    this.getFinancialDetailList(params);
    this.isQuery = true;
  }


  private onPageChange(page: number) {
    this.pagination.offset = (page - 1) * this.pagination.limit;
    if (!this.isQuery) {
      this.getFinancialDetailList();
    } else {
      this.onQuery("wyvonj");
    }
  }

  private onPageOptionChange(value: any) {
    this.pagination.page = 1;
    this.pagination.offset = 0;
  }


  /**
   * 获取任务列表
   */
  private async getFinancialDetailList(queryForm?: any) {
    let params: any = {
      offset: this.pagination.offset,
      limit: this.pagination.limit
    };
    if (queryForm) {
      params = queryForm;
    }
    const { data } = await Bill.getProfitIncomeList.r(params);
    console.log("getFinancialDetailList", data);
    if (data.result === 0) {
      let $data = data.data;
      this.tableData = $data.dataList;

      this.pagination.pageCount = $data.totalCount
        ? Math.ceil($data.totalCount / this.pagination.limit)
        : 1;
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

}
</script>

<style lang="less" scoped>
.financial-container {
  width: 100%;
  height: 100%;
}
.pagination-wrapper {
  background: white;
  border-top: 1px solid #d4d4d4;
}
</style>


